<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <TodoHeader :addListData="addListData" />
      <TodoList :listDatas="listDatas" :updateTodoIsDone="updateTodoIsDone" :delTodo="delTodo" />
      <TodoFooter :total="total" :isDoneNum="isDoneNum" :selectAllOrInvert="selectAllOrInvert" />
    </div>
  </div>
</template>

<script>
import TodoHeader from "./views/TodoHeader";
import TodoList from "./views/TodoList";
import TodoFooter from "./views/TodoFooter";

export default {
  name: "App",
  components: {
    TodoHeader,
    TodoList,
    TodoFooter,
  },
  data() { 
    return {
      listDatas: [
        { id:1,name:"雷欧奥特曼",isDone:false},
        { id:2,name:"艾斯奥特曼",isDone:false},
        { id:3,name:"奥特之父",isDone:true},
    ]
    }
  },
  methods: {
    // 添加listData
    addListData(name) {
      this.listDatas.push({
        id: Date.now(),
        name,
        isDone: false,
      });
    },
    // 修改listData的选中状态
    updateTodoIsDone(id) {
      const listData = this.listDatas.find((listData) => listData.id === id);
      listData.isDone = !listData.isDone;
    },

    delTodo(index) { 
      this.listDatas.splice(index, 1);
    },
    selectAllOrInvert(isDone) { 
      this.listDatas.forEach((listData) => {
        listData.isDone = isDone;
      });
    }
  },
  computed: {
    total() { 
      return this.listDatas.length;
    },
    isDoneNum() { 
      return this.listDatas.reduce((previous, current) => {
        return previous + current.isDone;
      }, 0);
    },
  },
};
</script>

<style>
/*base*/
body {
  background: #fff;
}

.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}

.btn:focus {
  outline: none;
}

.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>
